<%@ page import="grails.converters.JSON" %>
<!doctype html>
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
<meta name="layout" content="common">
<title>Dashboard</title>
<script src="${resource(dir:'js', file:'highcharts.js') }"></script>

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css"
	href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.8.2/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css"
	href="${resource(dir:'css', file:'demo_table.css') }">
<!-- DataTables -->
<script type="text/javascript" charset="utf8"
	src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.8.2/jquery.dataTables.min.js"></script>
<script>
	$(function () {
	    var chart;
	    $(document).ready(function() {
	    });
	    
	});
</script>
</head>
<body>
	<h2>Dashboard</h2>
	<hr />

	<div class="row>">
		<div class="span4">
			<h3>Summary</h3>
			<br />
			<table class="table table-striped table-bordered" style="width: 80%;"
				id="summary">
				<tr>
					<td><b style="color: orangered;">Total Expense</b></td>
					<td><b style="color: orangered;">Budget</b></td>
				</tr>
				<tr>
					<td><b>Today:</b> $25</td>
					<td><b>This Week:</b>: $70/$100</td>
				</tr>
				<tr>
					<td><b>Past 7 days:</b> $70</td>
					<td><b>This Month:</b> $169/$500</td>
				</tr>
				<tr>
					<td><b>This Month:</b> $169</td>
					<td></td>
				</tr>
				<tr>
					<td><b>Year To Date:</b> $865</td>
					<td></td>
				</tr>

			</table>
			<br />
		</div>
		<div class="span4">
			<h3>Spending Detail for June</h3>
			<br />
			<table class="table table-striped table-bordered" style="width: 80%;"
				id="summary">
				<tr>
					<td><b style="color: orangered;">Total Expense</b></td>
					<td><b style="color: orangered;">Budget</b></td>
				</tr>
				<tr>
					<td><b>Today:</b> $25</td>
					<td><b>This Week:</b>: $70/$100</td>
				</tr>
				<tr>
					<td><b>Past 7 days:</b> $70</td>
					<td><b>This Month:</b> $169/$500</td>
				</tr>
				<tr>
					<td><b>This Month:</b> $169</td>
					<td></td>
				</tr>
				<tr>
					<td><b>Year To Date:</b> $865</td>
					<td></td>
				</tr>

			</table>
		</div>
	</div>
	<br />
	<br />

	<div class="row">
		<p></p>
		<br />
		<p></p>
		<br />
		<p></p>
		<br />
		<h3>Spending Chart</h3>
		<div style="width: 80%;">
			<div id="chart_div" style="height: 300px;"></div>
		</div>
	</div>

	<div class="row">
		<br />
		<div class="span8">
			<h3>Recent Transactions</h3>
		</div>
		<table cellpadding="0" cellspacing="0" border="0" class="display"
			style="width: 70%;" id="example">
			<thead>
				<tr>
					<th>Date</th>
					<th>Merchant</th>
					<th>Amount</th>
					<th>Card</th>
				</tr>
			</thead>
			<tbody>
				<g:each in="${transactions}" var="transaction">
					<tr class="gradeA">
						<td>${dateFormat.format(transaction.txnDate) }</td>
						<td>${transaction.merchant.name }</td>
						<td>${transaction.amount }</td>
						<td class="center">****-${transaction.card.maskNumber() }</td>
					</tr>
				</g:each>
			</tbody>
			<tfoot>
				<tr>
					<th>Date</th>
					<th>Merchant</th>
					<th>Amount</th>
					<th>Card</th>
				</tr>
			</tfoot>
		</table>
	</div>

	<!-- Templates -->
	<script type="text/template" id="summary-tpl">
<tr>
	<td><b style="color: orangered;">Total Expense</b></td>
	<td><b style="color: orangered;">Budget</b></td>
</tr>
<tr>
	<td><b>Today:</b> $ {{todayspend}}</td>
	<td><b>This Week:</b>: $70/$100</td>
</tr>
<tr>
	<td><b>Past 7 days:</b> $ {{sevendayspend}}</td>
	<td><b>This Month:</b> $169/$500</td>
</tr>
<tr>
	<td><b>This Month:</b> $ {{monthspend}}</td>
	<td></td>
</tr>
<tr>
	<td><b>Year To Date:</b> $ {{yearspend}}</td>
	<td></td>
</tr>

</script>
	<script type="text/javascript">
//<![CDATA[
           MC.cardsJSON = ${cardsJSON};
           MC.transactionsJSON = ${new JSON(transactions).toString()};
///]]>
</script>

	<!-- App -->
	<script src="${resource(dir:'js/app', file:'transaction_mod.js') }"></script>
	<script src="${resource(dir:'js/app', file:'card_mod.js') }"></script>
	<script src="${resource(dir:'js/app', file:'dashboard_mod.js') }"></script>
	<script src="${resource(dir:'js/app', file:'expense_mod.js') }"></script>
</body>
</html>